<template>
  <div class="index">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="team">
          <div class="powertop">
            <div class="powertopcon">
              <div @click="choosetab(1)" class="powertopli" :class = "{'powertopact':nowtab==1}" >待处理工单（{{to_do}}）</div>
              <div @click="choosetab(2)" class="powertopli " :class = "{'powertopact':nowtab==2}" >超时工单（{{out_time}}）</div>
              <div @click="choosetab(3)" class="powertopli " :class = "{'powertopact':nowtab==3}" >已完成工单</div>
              <div @click="choosetab(4)" class="powertopli " :class = "{'powertopact':nowtab==4}" >全部工单</div>
              <div @click="choosetab(5)" class="powertopli " :class = "{'powertopact':nowtab==5}" >报表</div>
            </div>
            <div class="kflexc">
              <div v-if="shopid == 304676 || shopid == 50481 " class="t_jqr_box" @click="openrobot('ts')">
                  <img src="../../static/img/path.png" style="width: 20px;margin-right: 5px;" alt="">
                  钉钉机器人通知
              </div>
              <div class="t_jqr_box" style="width: 200px;" @click="goid('/tousugongdan/weixinjiqiren')">
                  <img src="../../static/img/path2.png" style="width: 20px;margin-right: 5px;" alt="">
                  企业微信机器人通知
              </div>
            </div>

          </div>
        </div>

        <div class="con">
          <div class="kflexc" style="margin-bottom: 20px;" v-if="nowtab==1">
            <div @click="choosetabx(1)" class="powertoplix kflexcc" :class = "{'powertopliactx':searchform.order_type==1}" >我的待处理工单({{mine}})</div>
            <div @click="choosetabx(2)" class="powertoplix kflexcc" :class = "{'powertopliactx':searchform.order_type==2}" >分销商待处理工单({{share}})</div>
          </div>
          <div class="t_search_box">
            <el-select  v-if="nowtab!=5" v-model="searchform.source" clearable placeholder="请选择投诉来源">
                <el-option v-for="(item,index) in tsfrom" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select clearable v-if="nowtab!=5" v-model="searchform.type_id" placeholder="请选择投诉类型">
                <el-option v-for="(item,index) in taglist" :key="index" :label="item.title" :value="item.id"></el-option>
            </el-select>
            <el-select @change="change_channel" clearable v-if="nowtab!=5" v-model="searchform.channel_id" placeholder="请选择订单来源分类">
                <el-option v-for="(item,index) in orderfrom" :key="index" :label="item.channel_name" :value="item.id"></el-option>
            </el-select>
            <el-input v-if="nowtab!=5" class="t_search_input" v-model.trim="searchform.c_name" placeholder="请输入产品所属渠道"></el-input>
            <el-input v-if="nowtab!=5" class="t_search_input" v-model.trim="searchform.id" placeholder="请输入工单ID"></el-input>
            <el-input v-if="nowtab!=5" class="t_search_input" v-model.trim="searchform.order_id" placeholder="请输入订单ID"></el-input>
            <el-input v-if="nowtab!=5" class="t_search_input" v-model.trim="searchform.plan_mobile_produced" placeholder="请输入生产号码"></el-input>
            <el-date-picker
            v-if="nowtab==3||nowtab==4||nowtab==5"
              type="datetimerange"
              v-model="timerange"
              @change="changetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="danger" round @click="search">搜索</el-button>
            <el-button v-show="nowtab==5" @click="downfile" type="primary" round plain >导出明细</el-button>
          </div>
          <div v-show="nowtab!=5">
            <el-table
            :header-cell-style="{
            background:'#F4F4F4',
            color:'#7D8087'}"
            :data="tableData"
            style="width: 100%;margin-top: 20px;">
              <el-table-column
                prop="id"
                align="center"
                label="工单ID">
              </el-table-column>
              <el-table-column
                prop="order_id"
                align="center"
                label="订单ID">
              </el-table-column>
              <el-table-column
                align="center"
                prop="creator"
                label="创建人">
              </el-table-column>
              <el-table-column
                align="center"
                width="160"
                prop="created_at"
                label="创建时间">
              </el-table-column>
              <el-table-column
                align="center"
                width="160"
                prop="overdue_time"
                label="超时时间">
              </el-table-column>
              <el-table-column
                align="center"
                prop="source"
                label="投诉来源">
                <template slot-scope="scope">
                  <span v-if="scope.row.source==1">运营商投诉</span>
                  <span v-if="scope.row.source==2">工商局投诉</span>
                  <span v-if="scope.row.source==3">平台工单投诉</span>
                  <span v-if="scope.row.source==4">电话投诉</span>
                  <span v-if="scope.row.source==5">其他投诉</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="type_id"
                label="投诉类型">
                <template slot-scope="scope">
                  {{ backtagtitle(scope.row.type_id) }}
                </template>
              </el-table-column>
              <el-table-column
                width="120"
                align="center"
                prop="priority"
                sortable
                label="处理优先级">
                <template slot-scope="scope">
                  <span v-if="scope.row.priority==3" style="color: #FF0000;">最高</span>
                  <span v-if="scope.row.priority==2" style="color: #F600CB;">较高</span>
                  <span v-if="scope.row.priority==1" style="color: #FFA700;">普通</span>
                  <span  v-if="scope.row.priority==0" >较低</span>
                </template>
              </el-table-column>
              <!-- <el-table-column
                align="center"
                prop="content"
                label="投诉内容">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" :content="scope.row.content" placement="top">
                    <div class="t_overtips">{{ scope.row.content }}</div>
                  </el-tooltip>

                </template>
              </el-table-column> -->
              <!-- <el-table-column
                align="center"
                prop="requirement"
                label="处理意见">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" :content="scope.row.requirement" placement="top">
                    <div class="t_overtips">{{ scope.row.requirement }}</div>
                  </el-tooltip>
                </template>
              </el-table-column> -->
              <el-table-column
                align="center"
                prop="c_name"
                label="产品所属渠道">
              </el-table-column>
              <el-table-column
                align="center"
                prop="order_source"
                label="订单来源">
              </el-table-column>
              <el-table-column
                align="center"
                prop="plan_mobile_produced"
                label="生产号码">
              </el-table-column>
              <el-table-column
                width="160"
                align="center"
                sortable
                v-if="nowtab==1"
                prop="overdue_at"
                label="剩余时间">
                <template slot-scope="scope">
                  <div :class="{t_red_time:scope.row.djs[0]<2}" >剩余{{ scope.row.djs[0] }}小时{{ scope.row.djs[1] }}分{{ scope.row.djs[2] }}秒</div>
                </template>
              </el-table-column>
              <el-table-column
                width="160"
                align="center"
                sortable
                v-if="nowtab==2"
                prop="overdue_at"
                label="剩余时间">
                <template slot-scope="scope">
                  <div class="t_red_time" >已超时{{ scope.row.djs[0] }}小时{{ scope.row.djs[1] }}分{{ scope.row.djs[2] }}秒</div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="status"
                sortable
                label="状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status==0">待处理</span>
                  <span v-if="scope.row.status==1">处理中</span>
                  <span v-if="scope.row.status==2">处理完成</span>
                  <span v-if="scope.row.status==3">待处理</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="handler"
                label="处理人">
              </el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="操作">
                <template slot-scope="scope">
                  <el-button

                    size="mini"
                    type="text"
                    @click="todetail(1,scope.row.id)"
                    >查看</el-button>
                  <el-button
                  v-if="scope.row.status==0||scope.row.status==1||scope.row.status==3"
                    size="mini"
                    type="text"
                    @click="todetail(2,scope.row.id)"
                    >处理</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: right;margin-top: 20px;">
              <el-pagination
                background
                :page-size="20"
                @current-change="pagechange"
                layout="total,prev, pager, next"
                :total="total">
              </el-pagination>
            </div>

          </div>
          <div v-show="nowtab==5">
            <div class="t_tongji_box">
              <div>赔付金额:{{ bblist.compensation_amount }}</div>
              <div style="margin-left: 60px;">投诉总数量：{{ bblist.total }}</div>
            </div>
            <div class="t_title_box">
              <div class="t_red_g"></div>
              <div>投诉类型</div>
            </div>
            <el-table
            :header-cell-style="{
            background:'#F6F6F6',
            color:'#7D8087'}"
              :data="bblist.type_statistics"
              border

              style="width: 100%">
              <el-table-column
                align="center"
                prop="title"
                label="投诉类型">
              </el-table-column>
              <el-table-column
                align="center"
                prop="count"
                label="数量">
              </el-table-column>
              <el-table-column
                align="center"
                prop="percentage"
                label="占比">
                <template slot-scope="scope">
                  <span >{{  scope.row.percentage}}%</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="t_title_box">
              <div class="t_red_g"></div>
              <div>处理统计</div>
            </div>
            <el-table
            :header-cell-style="{
            background:'#F6F6F6',
            color:'#7D8087'}"
              :data="bblist.handler_statistics"
              border
              style="width: 100%">
              <el-table-column
                align="center"
                prop="title"
                label="处理人">
              </el-table-column>
              <el-table-column
                align="center"
                prop="count"
                label="数量">
              </el-table-column>
              <el-table-column
                align="center"
                prop="percentage"
                label="占比">
                <template slot-scope="scope">
                  <span >{{  scope.row.percentage}}%</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="t_title_box">
              <div class="t_red_g"></div>
              <div>投诉来源</div>
            </div>
            <el-table
            :header-cell-style="{
            background:'#F6F6F6',
            color:'#7D8087'}"
              :data="bblist.source_statistics"
              border
              style="width: 100%">
              <el-table-column
                align="center"
                prop="title"
                label="投诉来源">
              </el-table-column>
              <el-table-column
                align="center"
                prop="count"
                label="数量">
              </el-table-column>
              <el-table-column
                align="center"
                prop="percentage"
                label="占比">
                <template slot-scope="scope">
                  <span >{{  scope.row.percentage}}%</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="t_title_box">
              <div class="t_red_g"></div>
              <div>按时统计</div>
            </div>
            <el-table
            :header-cell-style="{
            background:'#F6F6F6',
            color:'#7D8087'}"
              :data="bblist.resolve_statistics"
              border
              style="width: 100%">
              <el-table-column
                align="center"
                prop="title"
                label="完成时间">
              </el-table-column>
              <el-table-column
                align="center"
                prop="count"
                label="数量">
              </el-table-column>
              <el-table-column
                align="center"
                prop="percentage"
                label="占比">
                <template slot-scope="scope">
                  <span >{{  scope.row.percentage}}%</span>
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>


      </div>
    </div>
    <!-- 机器人弹窗 -->
    <robot v-if="showrobot" :showrobot="showrobot" :robottype="robottype" @update="update" @closerobot="closerobot" />
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import robot from '@/components/robot.vue'

  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      "robot":robot
    },
    name: 'tousugongdan',
    data() {
      return {
        nowtab:1,
        //投诉来源
        tsfrom:[
            {
                value:1,
                label:'运营商投诉'
            },
            {
                value:2,
                label:'工商局投诉'
            },
            {
                value:3,
                label:'平台工单投诉'
            },
            {
                value:4,
                label:'电话投诉'
            },
            {
                value:5,
                label:'其他投诉'
            },
        ],
        //类型列表
        taglist:[],
        //订单归属
        orderfrom:[],
        //搜索
        searchform:{
          page:1,
          page_size:20,
          source:'',
          type_id:'',
          status:1,
          start_time:'',
          end_time:'',
          order_type:'',
          channel_id:'',
          id:'',
          order_id:'',
          plan_mobile_produced:'',
          c_name:'',
          order_type:1
        },
        //时间
        timerange:[],
        //修改时间
        tableData: [],
      total:0,
        //倒计时
        djstime:[],
        //正计时
        zjstime:[],
        //报表数据
        bblist:{},
        to_do:0,
        out_time:0,
        //机器人弹窗
        showrobot:false,
        robottype:'',
        shopid:'',
        share:0,
        mine:0
      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;

      //获取标签列表
      this.gettaglist()

     if(this.$route.query.tab){
      this.nowtab = this.$route.query.tab
      this.searchform.status = this.$route.query.tab
      //获取列表
      this.getlist()
     }else{
      //获取列表
      this.getlist()
     }
      //订单来源分类
      this.formtype()



    },
    methods: {
      //修改订单来源分类
      change_channel(val){

        if(val.toString()==''){
          this.searchform.order_type = ''
        }else{
          if(val.toString()=='0'){
            //分销
            this.searchform.order_type = 2
          }else{
            //普通
            this.searchform.order_type = 1
          }
        }
        console.log(val.toString())
        console.log(this.searchform.order_type)

      },
      //订单来源分类
      formtype(){
        axios.get('/api/form/channels')
          .then(response => {
              if (response.data.msg.code == 0) {
                  console.log('订单来源分类')
                  console.log(response.data.data)
                  this.orderfrom = response.data.data.data
                  this.orderfrom.push({channel_name:'分销',id:0})

              } else {
                  this.$message.error(response.data.msg.info);
              }
          })
      },
      //数量
      getcount(){
        axios.post('/api/gth/admin/complaint/job/count')
          .then(response => {
              if (response.data.msg.code == 0) {
                  console.log('获取数量')
                  console.log(response.data.data)
                  this.to_do = response.data.data.to_do
                  this.out_time = response.data.data.out_time
                  this.mine = response.data.data.mine
                  this.share = response.data.data.share
                  this.resetSetItem('watchStorage', response.data.data.total);

              } else {
                  this.$message.error(response.data.msg.info);
              }
          })

      },
      //修改tab
      choosetab(i){

        this.nowtab = i
        //清除所有计时
        this.cleartime()
        //清空搜索
        this.searchform.page=1
        this.searchform.source=''
        this.searchform.type_id=''
        this.searchform.start_time=''
        this.searchform.end_time=''
        this.searchform.order_type=''
        this.searchform.channel_id=''
        this.searchform.id=''
        this.searchform.order_id=''
        this.searchform.plan_mobile_produced=''
        this.searchform.c_name=''
        this.searchform.order_type = ""

        this.timerange=[]
        //清空列表
        this.tableData=[]
        if(i==1){
          this.searchform.order_type = 1
          this.searchform.status=1
          //获取列表
          this.searchform.start_time=""
          this.searchform.end_time=""
          this.getlist()
        }else if(i==2){
          this.searchform.status=2
          //获取列表
          this.searchform.start_time=""
          this.searchform.end_time=""
          this.getlist()
        }else if(i==3){
          //时间默认30天
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          this.searchform.start_time=this.getCurrentTime (start)
          this.searchform.end_time=this.getCurrentTime (end)
          this.searchform.status=3
          //获取列表
          this.getlist()
        }else if(i==4){
          //时间默认30天
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          this.searchform.start_time=this.getCurrentTime (start)
          this.searchform.end_time=this.getCurrentTime (end)
          this.searchform.status=0
          //获取列表
          this.getlist()
        }else if(i==5){
          //时间默认30天
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          this.searchform.start_time=this.getCurrentTime (start)
          this.searchform.end_time=this.getCurrentTime (end)

          console.log(this.searchform)

          this.timerange[0] = this.getCurrentTime (start)
          this.timerange[1] = this.getCurrentTime (end)
          //获取报表列表
          this.getbaobiaolist()
        }



      },
      choosetabx:function(val){
        this.searchform.order_type = val
        this.getlist()
      },
      //中国标准时间转化
      getCurrentTime (date) {
        // let date = date
        var year = date.getFullYear() //返回指定日期的年份
        var month = this.repair(date.getMonth() + 1);//月
        var day = this.repair(date.getDate());//日
        var hour = this.repair(date.getHours());//时
        var minute = this.repair(date.getMinutes());//分
        var second = this.repair(date.getSeconds());//秒

        //当前时间
        var curTime = year + "-" + month + "-" + day
            + " " + hour + ":" + minute + ":" + second;
        console.log(curTime)
        //返回 2022-11-25 11:23:26
        return curTime;
      },
      //补0
      repair(i){
        if (i >= 0 && i <= 9) {
          return "0" + i;
        } else {
          return i;
        }
      },
      //搜索
      search(){
        this.searchform.page=1
        //清除所有计时
        this.cleartime()
        if(this.nowtab==5){
          //获取报表列表
          this.getbaobiaolist()
        }else{
           //获取列表
          this.getlist()
        }

      },
      //获取列表
      getlist(){
        axios.post('/api/plan-market/admin/complaint/job/list',this.searchform)
                .then(response => {
                    if (response.data.msg.code == 0) {
                        console.log('获取列表')
                        console.log(response.data.data)
                        this.tableData = response.data.data.data

                        for(var x=0;x<this.tableData.length;x++){
                          this.tableData[x].djs = []
                        }

                        this.total = response.data.data.total
                        //判断正计时还是倒计时
                        if(this.nowtab==1){
                          //倒计时
                          this.daojishi()
                        }else if(this.nowtab==2){
                          //正计时
                          this.zhengjishi()
                        }
                        //获取数量
                        this.getcount()
                    } else {
                        this.$message.error(response.data.msg.info);
                    }
                })
      },
      //翻页
      pagechange(val){
        console.log(val)
        this.searchform.page = val
        //清除所有计时
        this.cleartime()
        //获取列表
        this.getlist()

      },
      //获取报表列表
      getbaobiaolist(){
        axios.post('/api/plan-market/admin/complaint/job/statistics',{
          start_time:this.searchform.start_time,
          end_time:this.searchform.end_time,
        })
          .then(response => {
              if (response.data.msg.code == 0) {
                  console.log('获取报表列表')
                  console.log(response.data.data)
                  this.bblist = response.data.data
              } else {
                  this.$message.error(response.data.msg.info);
              }
          })
      },
      //获取标签列表
      gettaglist(){
            axios.get('/api/gth/admin/complaint/job/type/list',)
                .then(response => {
                    if (response.data.msg.code == 0) {
                        console.log('获取标签列表')
                        console.log(response)
                        this.taglist = response.data.data

                    } else {
                        this.$message.error(response.data.msg.info);
                    }
                })
        },
      //根据id返回标签内容
      backtagtitle(id){
          for(var x = 0;x<this.taglist.length;x++){
              if(this.taglist[x].id==id){
                  return this.taglist[x].title
              }
          }
      },
      //修改时间
      changetime(val){
          if(val==null){
            this.searchform.start_time=''
            this.searchform.end_time=''
          }else{
            this.searchform.start_time=val[0]
            this.searchform.end_time=val[1]
          }
          console.log(val)
      },
      //倒计时计算
      daojishi(){
        for(var i = 0;i<this.tableData.length;i++){
            var endtime = setInterval((i)=>{
              var item = this.tableData[i]
              item.overdue_at--
              item.djs = this.getTime(item.overdue_at)
              this.$set(this.tableData,i,item)
            },1000,i)
            //储存定时器，用来清除
            this.djstime.push(endtime)
        }
      },
      //正计时计算
      zhengjishi(){
        for(var i = 0;i<this.tableData.length;i++){
            var endtime = setInterval((i)=>{
              var item = this.tableData[i]
              item.overdue_at++
              item.djs = this.getTime(item.overdue_at)
              this.$set(this.tableData,i,item)
            },1000,i)
            //储存定时器，用来清除
            this.zjstime.push(endtime)
        }
      },
      //清除所有计时
      cleartime(){
        for(var x=0;x<this.djstime.length;x++){
          clearInterval(this.djstime[x])
        }
        for(var x=0;x<this.zjstime.length;x++){
          clearInterval(this.zjstime[x])
        }
        this.djstime = []
        this.zjstime = []
      },
      //秒转时分秒
      getTime(value) {
        // var value='22231'
        let theTime = parseInt(value);// 秒
        let theTime1 = 0;// 分
        let theTime2 = 0;// 小时

        if(theTime > 59) {
          theTime1 = parseInt(theTime/60);
          theTime = parseInt(theTime%60);

          if(theTime1 > 59) {
            theTime2 = parseInt(theTime1/60);
            theTime1 = parseInt(theTime1%60);
          }
        }
        // let result = ''+parseInt(theTime)+'秒';
        let result = [0,0,parseInt(theTime)];
        if(theTime1 > 0) {
          // result = ''+parseInt(theTime1)+'分'+result;
          result = [0,parseInt(theTime1),parseInt(theTime)];
        }
        if(theTime2 > 0) {
          // result = ''+parseInt(theTime2)+'小时'+result;
          result = [parseInt(theTime2),parseInt(theTime1),parseInt(theTime)];
        }
        // console.log('返回时分秒数组')
        // console.log(result)
        //  return [h, m, s]
        if(parseInt(theTime)<0){
          return [0,0,0];
        }else{
          return result;
        }

      },
      //查看、处理
      todetail(type,id){
        if(type==1){
          //查看
          this.$router.push({
            path: '/tousugongdan/checkts',
            query:{id:id,tab:this.nowtab}
          })
        }else{
          //处理
          axios.post('/api/plan-market/admin/complaint/job/update/handler',{
            id:id,
            status:1
          })
          .then(response => {
              if (response.data.msg.code == 0) {
                this.$router.push({
                  path: '/tousugongdan/checkts',
                  query:{id:id,tab:this.nowtab}
                })
              } else {
                  this.$message.error(response.data.msg.info);
              }
          })
        }

      },
      //下载明细
      downfile(){

        axios.post('/api/plan-market/admin/complaint/job/export',{
          start_time:this.searchform.start_time,
          end_time:this.searchform.end_time,
        })
            .then(response => {
                if (response.data.msg.code == 0) {
                  let routeData = this.$router.resolve({
                      path: '/order_export4',query:{
                        type:'tousu'
                      }
                    });
                    window.open(routeData.href, '_blank');

                } else {
                    this.$message.error(response.data.msg.info);
                }
            })
      },
      // 机器人
      update(){
        this.showrobot = false
      },
      closerobot(){
        this.showrobot = false
      },
      openrobot(type){
        this.robottype = type
        this.showrobot = true
      }
    },
    beforeDestroy(){
      //清除
      console.log('清除')
      this.cleartime()


    },


  }
</script>

<style  scoped>



    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .powertopcon {
      display: flex;
      width: 800px;
    }
    .t_jqr_box{
      background-color: rgb(19, 84, 255);
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      width: 160px;
      margin-right: 20px;
      border-radius: 3px;
      cursor: pointer;

    }
    .powertoplix{
      cursor: pointer;
      width: 176px;
      height: 44px;
      margin-right: 20px;
    }
    .powertopliactx{
      width: 176px;
      height: 44px;
      border-radius: 56px;
      background: #2974FF;
      color: #FFFFFF;
    }
    .powertopli {
      width: 280px;
      line-height: 50px;
      border-bottom: 3px #F9F9F9 solid;
      color: #727272;
      border-right: 1px #F9F9F9 solid;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }

    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
      color:#2974FF ;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #f4f4f4
    }
    .con {
				padding: 20px ;
    }
    .t_overtips{
      width: 100%;
      overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
      text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
      white-space: nowrap;     /*文本不换行*/
    }
    .t_tongji_box{
      background-color: rgb(241, 241, 241);
      padding: 16px 30px;
      box-sizing: border-box;
      /* font-size: 18px; */
      display: flex;
      color: #515151;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .t_title_box{
      display: flex;
      align-items: center;
      color: #525252;
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .t_red_g{
      background-color: #2974FF;
      width: 4px;
      height: 16px;
      margin-right: 10px;
    }
    .t_red_time{
      color: #2974FF;
    }
    .t_search_input{
      width: 191px;
      margin-bottom: 5px;
    }
    /* .t_search_box{
      display: flex;
      flex-wrap: wrap;
    } */
    /deep/.t_search_box .el-input--suffix .el-input__inner  {
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-range-editor.el-input__inner{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-date-editor .el-range-input{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-input__inner{
      background-color: #f7f8fa;
      border: none;

    }


</style>
